<!-- 编辑个人资料页面 -->
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useProfileStore } from '@/stores/profile'

const userStore = useUserStore()
const profileStore = useProfileStore()

// 加载状态
const loading = ref(false)

// 表单数据
const formData = ref({
  avatar: userStore.userInfo?.avatarUrl || '/static/images/default-avatar.png',
  nickname: userStore.userInfo?.nickname || '',
  phone: userStore.userInfo?.phone || '',
  email: userStore.userInfo?.email || '',
  gender: userStore.userInfo?.wechatInfo?.gender || 0,
  region: userStore.userInfo?.region || ''
})

// 性别选项
const genderOptions = [
  { label: '未设置', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]

// 处理性别选择
const handleGenderChange = (e: { detail: { value: string } }) => {
  formData.value.gender = genderOptions[Number(e.detail.value)].value
}

// 处理地区选择
const handleRegionChange = (e: { detail: { value: string[] } }) => {
  formData.value.region = e.detail.value.join(' ');
  console.log('Selected region:', formData.value.region);
}

// 处理头像上传
const handleAvatarUpload = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      formData.value.avatar = tempFilePath
    },
    fail: () => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}

// 保存信息
const handleSave = async () => {
  // 表单验证
  if (!formData.value.nickname.trim()) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none'
    })
    return
  }

  if (formData.value.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.value.email)) {
    uni.showToast({
      title: '请输入有效的邮箱地址',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    await profileStore.updateUserInfo({
      avatar: formData.value.avatar,
      username: formData.value.nickname,
      phone: formData.value.phone,
      email: formData.value.email,
      gender: formData.value.gender,
      region: formData.value.region
    })

    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })

    // 延迟返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    console.error('保存失败:', error)
    uni.showToast({
      title: '保存失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
        profileStore.clearUserInfo() // 清除用户信息
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<template>
  <view class="edit-container">
    <!-- 加载提示 -->
    <view class="loading-mask" v-if="loading">
      <uni-load-more status="loading" />
    </view>

    <!-- 头像上传 -->
    <view class="avatar-section" @tap="handleAvatarUpload">
      <image class="avatar" :src="formData.avatar" mode="aspectFill" />
      <text class="upload-text">点击更换头像</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 用户名 -->
      <view class="form-item">
        <text class="label">用户名</text>
        <input class="input" type="text" v-model="formData.nickname" placeholder="请输入用户名" />
      </view> <!-- 手机号 -->
      <view class="form-item"> <text class="label">手机号</text> <input class="input" type="number"
          v-model="formData.phone" placeholder="请输入手机号" disabled /> </view> <!-- 邮箱 -->
      <view class="form-item"> <text class="label">邮箱</text> <input class="input" type="text" v-model="formData.email"
          placeholder="请输入邮箱" /> </view> <!-- 性别 -->
      <view class="form-item"> <text class="label">性别</text>
        <picker class="picker" :range="genderOptions" range-key="label" :value="formData.gender"
          @change="handleGenderChange">
          <view class="picker-text"> {{genderOptions.find(opt => opt.value === formData.gender)?.label || '请选择性别'}}
          </view>
        </picker>
      </view> <!-- 地区 -->
      <view class="form-item"> <text class="label">地区</text>
        <picker mode="region" @change="handleRegionChange" :value="formData.region ? formData.region.split(' ') : []"
          class="picker">
          <view class="picker-text"> {{ formData.region || '请选择地区' }}</view>
        </picker>
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="button-section">
      <button class="save-btn" @tap="handleSave">保存信息</button>
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<style>
.edit-container {
  min-height: 100vh;
  padding: 30rpx;
  background: linear-gradient(135deg, #1b1b2f, #252d3a);
  position: relative;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40rpx 0;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #adbac7;
}

.form-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
  margin-right: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #adbac7;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 0 24rpx;
  color: #fff;
  font-size: 28rpx;
}

.picker,
.region-picker {
  width: 100%;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 28rpx;
  color: #fff;
}

.button-section {
  padding: 0 30rpx;
}

.save-btn,
.logout-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.save-btn {
  background: #07c160;
  color: #fff;
}

.logout-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ff4d4f;
  border: 2rpx solid rgba(255, 77, 79, 0.3);
}

/* 禁用状态样式 */
.input:disabled {
  opacity: 0.6;
}
</style>